<!DOCTYPE html>
<html>
<head>
	<title>inline,block,inline-block</title>	
	<meta charset='utf-8'/>
	<link rel="stylesheet" href="main.css">
	<script type="text/javascript" src="../../jquery/jquery.js"></script>
	<script type='text/javascript'>
		(function(){
			$(function(){
				let $box1 = $('.box1');
				let $display = $('#char1');
				let $mpf = $('#char2');
				let $mpfValue = $('#ctrl');
				let $all = $($display,$mpf,$mpfValue);
				$all.each(() => {
					$(this).bind('change',function(){
						$box1.html(getInfo(0));
						$box1.css(getInfo(1));
					})
				})
				$box1.html(getInfo(0));
				$box1.css(getInfo(1));

				function getInfo(type=0){		//获取选择器内容
					let info = [];
					info[0] = '这是内容';
					if($mpf && $display && $mpfValue) {
						let propName = $mpf.val();
						info[0] = 'display:' + $display.val() + ($display.val()!== 'inline' ? '<br/>' : '  ') + $mpf.val() + ':' + $mpfValue.val() + "px"; 
							info[1] = {
							'display': $display.val() ,
							[propName] : $mpfValue.val() + "px"      //es6才出现的[表达式]，之前key中不允许出现变量
						};

					}
					return info[type];
				}

			})
		})();
	</script>

</head>
<body>
	<div class="box0">
		我是参照物<div class="box1">这是内容</div>我是参照物
		<div class="box2">我是参照物</div>
		<div class="ctrlWrap">
			<div class="controller">
				<div class="controller">
					<label>display:</label>
					<select name="char" id="char1" class="char">
						<option value="inline">inline</option>
						<option value="block" selected>block</option>
						<option value="inline-block">inline-block</option>
					</select>
				</div>
				<div class="controller">
					<label>属性:</label>
					<select name="char" id="char2" class="char">
						<option value="margin-top" selected>margin-top</option>
						<option value="margin-bottom">margin-bottom</option>
						<option value="margin-left">margin-left</option>
						<option value="margin-right">margin-right</option>
						<option value="padding-top">padding-top</option>
						<option value="padding-bottom">padding-bottom</option>
						<option value="padding-left">padding-left</option>
						<option value="padding-right">padding-right</option>
						<option value="border-width">border-width</option>
						<option value="font-size">font-size</option>
					</select>
					<input type="range" class="ctrl" id="ctrl" min='0' max='60' step="2" value="0">
				</div>
			</div>
		</div>
	</div>
</body>
</html>